import React, { Component } from 'react';
import { Flex, Carousel } from 'antd-mobile';
import { cartStoreActivity } from './CartStoreActivity.less';


export default class CartStoreActivity extends Component {
    constructor(props){
        super(props)
        this.state={
            num:0
        };
        this.timer=null;
    }

    componentDidMount() {
        // simulate img loading
        this.timer =  setTimeout(() => {
            this.setState({
                num:this.state.num+1
            });
        }, 1000);
    }

    componentWillUnmount(){
        //console.log(2);
        if(this.timer!=null){
            clearTimeout(this.timer);
        }
    }

    render() {
        const { contentList, style } = this.props;

        return (
            <div style={style} className={cartStoreActivity}>
                <Flex className="hot_body" justify="center">
                    <Flex.Item className="text-overflow-hidden" style={{ color:"#656565" }}>
                        <Carousel className="my-carousel"
                                  vertical
                                  dots={false}
                                  selectedIndex={this.state.num}
                                  dragging={false}
                                  swiping={false}
                                  autoplay={contentList.length==1?false:true}
                                  infinite
                                  speed={200}
                                  autoplayInterval={3000}
                            // resetAutoplay={false}
                        >
                            {
                                contentList.map((v,i,a)=>{
                                    let name = "";
                                    // let orderType = 1;
                                    switch (v.activityType) {
                                        case 10:
                                            name = '满减';
                                            break;
                                        case 20:
                                            name = "满免邮";
                                            break;
                                        case 30:
                                            name = "满送";
                                            break;
                                        case 40:
                                            name = "满折";
                                            break;
                                        case 50:
                                            name = "团购";
                                            break;
                                        case 60:
                                            name = "限时抢购";
                                            break;
                                        case 90:
                                            name = "优惠券"
                                            break;
                                    }

                                    return (
                                        <Flex key={i} style={{margin:"0 .1rem 0 .6rem"}} className="store_activity">
                                            <div
                                                style={{
                                                    padding:"0.05rem 0.1rem",
                                                    fontSize:"0.2rem",
                                                    color:"#ff0036",
                                                    backgroundColor:'#fbe9e9',
                                                    marginRight:'0.1rem'
                                                }}>
                                                {name}
                                            </div>
                                            <div style={{ fontSize:"0.22rem", color:"#333" }}>{v.name}</div>
                                            {/*<Icon type="right" size="xs" style={{ color:"#333" }} />*/}
                                        </Flex>
                                    )
                                })
                            }
                        </Carousel>
                    </Flex.Item>
                </Flex>
            </div>
        )
    }
}
